<template>
	<uni-popup ref="popup">
		<view class="rounded-xl bg-white py-3-1 border b-active" style="width: 700rpx">
			<view class="text-center mb-3-1">
				<text class="text-l color-active">选择储值卡</text>
			</view>
			<scroll-view class="mb-3-1" style="max-height: 600rpx" scroll-y>
				<view
					v-for="(data, i) in list"
					:key="data.id"
					class="p-3-1 border-b b-active-op20 row-center"
					:class="[i === 0 ? 'border-t' : '']"
					hover-class="bg-primary-op20"
					hover-start-time="0"
					hover-stay-time="50"
					@click="selectItem(data)"
				>
					<view class="flex-center mr-3-1">
						<text
							class="iconfont text-xxl color-main"
							:class="[data.selected ? 'icon-gouxuan' : 'icon-weixuanze']"
						></text>
					</view>
					<view class="flex-1">
						<view class="row-center mb-2-2">
							<text class="text-n color-main block">卡号: {{ data.cardNo }}</text>
							<view class="flex-1" />
							<text class="text-n color-main block">{{ getStatusText(data.status) }}</text>
						</view>
						<view class="row-center">
							<text class="text-n color-main block">面额: ¥{{ data.denomination }}</text>
							<view class="flex-1" />
							<text class="text-n color-main block">余额: ¥{{ data.balance }}</text>
						</view>
					</view>
				</view>
				<c-empty v-if="!loading && list.length === 0"></c-empty>
			</scroll-view>
			<view>
				<button
					class="py-2-2 text-center rounded-l bottom-shadow mx-3-1 bind-btn text-l font-semibold"
					style="background-color: #246a49; color: #fdf6e5"
					hover-class="opacity-80"
					hover-start-time="0"
					hover-stay-time="50"
					@click="handleSel"
				>
					确定
				</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref } from 'vue';
import { getStoredList } from '@/base/api/member.js';

const emits = defineEmits(['select']);

const popup = ref();
async function handleSel() {
	const sels = [];
	list.value.forEach((el) => {
		if(el.selected) {
			sels.push(el);
		}
	});
	popup.value.close();
	emits("select", sels);
}

const loading = ref(true);
const list = ref([]);
function selectItem(item){
	item.selected = !item.selected;
}
function getStatusText(status){
	const arr = ['未关联','正常','冻结'];
	return arr[status];
}
defineExpose({
	async open() {
		if (list.value.length === 0) {
			loading.value = true;
			let data = await getStoredList();
			loading.value = false;
			// data = [
			// 	{id:1, cardNo: "675677567", status: 1,denomination: 300, balance: 300},
			// 	{id:2, cardNo: "234234235435", status: 1,denomination: 300, balance: 300},
			// 	{id:3, cardNo: "456456456", status: 1,denomination: 300, balance: 300},
			// 	{id:4, cardNo: "345345345", status: 1,denomination: 300, balance: 300},
			// 	{id:5, cardNo: "4564567456", status: 1,denomination: 300, balance: 300},
			// 	{id:6, cardNo: "4567456456", status: 1,denomination: 300, balance: 300},
			// ];
			if (data) {
				list.value = data;
				if (data.length > 0) {
					popup.value.open();
				} else {
					getApp().globalData.toast('暂无储值卡', true);
				}
			}
		} else {
			list.value.forEach((el) => {
				el.selected = false;
			});
			popup.value.open();
		}
	},
});
</script>

<style>
.bind-btn {
	line-height: 1;
	border-radius: 48rpx;
}
.bind-btn::after {
	content: '';
	display: none;
}
</style>
